/**
 * HR管理系统前端功能测试脚本
 * 使用Puppeteer测试前端页面的基本功能
 */

const puppeteer = require('puppeteer');

async function testFrontendFunctionality() {
    console.log('🧪 开始前端功能测试...\n');

    let browser;
    let testResults = {
        total: 0,
        passed: 0,
        failed: 0
    };

    function logTest(testName, result, message = '') {
        testResults.total++;
        if (result) {
            testResults.passed++;
            console.log(`✅ ${testName}: ${message}`);
        } else {
            testResults.failed++;
            console.log(`❌ ${testName}: ${message}`);
        }
    }

    try {
        // 启动浏览器
        console.log('🚀 启动浏览器...');
        browser = await puppeteer.launch({
            headless: true,
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        });

        const page = await browser.newPage();

        // 设置视窗大小
        await page.setViewport({ width: 1280, height: 720 });

        // 1. 测试页面加载
        console.log('\n📄 第一阶段：页面加载测试');

        try {
            await page.goto('http://localhost:5174', {
                waitUntil: 'networkidle2',
                timeout: 30000
            });
            logTest('页面加载', true, '成功加载首页');
        } catch (error) {
            logTest('页面加载', false, `页面加载失败: ${error.message}`);
            return;
        }

        // 等待页面加载完成
        await page.waitForTimeout(2000);

        // 检查页面标题
        const title = await page.title();
        logTest('页面标题', title.includes('Vue'), `页面标题: ${title}`);

        // 2. 测试登录页面
        console.log('\n🔐 第二阶段：登录功能测试');

        try {
            // 导航到登录页面
            await page.goto('http://localhost:5174/login', {
                waitUntil: 'networkidle2',
                timeout: 10000
            });

            // 等待登录表单加载
            await page.waitForSelector('.ant-form', { timeout: 5000 });

            // 检查登录表单元素
            const usernameInput = await page.$('input[placeholder*="用户名"]');
            const passwordInput = await page.$('input[placeholder*="密码"]');
            const loginButton = await page.$('button[type="submit"]');

            logTest('用户名输入框', !!usernameInput, '用户名输入框存在');
            logTest('密码输入框', !!passwordInput, '密码输入框存在');
            logTest('登录按钮', !!loginButton, '登录按钮存在');

            // 3. 测试登录功能
            if (usernameInput && passwordInput && loginButton) {
                console.log('\n🔑 第三阶段：执行登录测试');

                // 填写登录表单
                await usernameInput.type('test_admin');
                await passwordInput.type('Test123456');

                // 点击登录按钮
                await loginButton.click();

                // 等待登录响应
                await page.waitForTimeout(3000);

                // 检查是否跳转到首页或显示错误
                const currentUrl = page.url();
                const hasError = await page.$('.ant-alert-error');

                if (currentUrl.includes('/dashboard') || currentUrl.includes('/')) {
                    logTest('登录跳转', true, '登录成功，跳转到首页');
                } else if (hasError) {
                    logTest('登录跳转', false, '登录失败，显示错误信息');
                } else {
                    logTest('登录跳转', false, '登录状态未知');
                }
            }

        } catch (error) {
            logTest('登录页面测试', false, `登录页面测试失败: ${error.message}`);
        }

        // 4. 测试导航菜单
        console.log('\n🧭 第四阶段：导航菜单测试');

        try {
            // 检查侧边栏菜单
            const sidebar = await page.$('.ant-layout-sider');
            logTest('侧边栏菜单', !!sidebar, '侧边栏菜单存在');

            if (sidebar) {
                // 检查菜单项
                const menuItems = await page.$$('.ant-menu-item');
                logTest('菜单项数量', menuItems.length > 0, `找到 ${menuItems.length} 个菜单项`);

                // 检查特定菜单项
                const dashboardMenu = await page.$('[data-testid="dashboard-menu"]') ||
                                    await page.$('.ant-menu-item:has-text("仪表板")');
                logTest('仪表板菜单', !!dashboardMenu, '仪表板菜单存在');
            }
        } catch (error) {
            logTest('导航菜单测试', false, `导航菜单测试失败: ${error.message}`);
        }

        // 5. 测试响应式布局
        console.log('\n📱 第五阶段：响应式布局测试');

        try {
            // 测试移动端视图
            await page.setViewport({ width: 375, height: 667 });

            // 检查移动端菜单按钮
            const mobileMenuButton = await page.$('.ant-layout-sider-trigger');
            logTest('移动端菜单按钮', !!mobileMenuButton, '移动端菜单按钮存在');

            // 恢复桌面视图
            await page.setViewport({ width: 1280, height: 720 });

        } catch (error) {
            logTest('响应式布局测试', false, `响应式布局测试失败: ${error.message}`);
        }

        // 6. 测试页面性能
        console.log('\n⚡ 第六阶段：页面性能测试');

        try {
            const performance = await page.evaluate(() => {
                const perf = window.performance;
                const timing = perf.timing;
                return {
                    domContentLoaded: timing.domContentLoadedEventEnd - timing.navigationStart,
                    loadComplete: timing.loadEventEnd - timing.navigationStart,
                    firstPaint: performance.getEntriesByName('first-paint')[0]?.startTime || 0,
                    firstContentfulPaint: performance.getEntriesByName('first-contentful-paint')[0]?.startTime || 0
                };
            });

            logTest('DOM内容加载时间', performance.domContentLoaded < 3000,
                   `${performance.domContentLoaded}ms`);
            logTest('页面完全加载时间', performance.loadComplete < 5000,
                   `${performance.loadComplete}ms`);

        } catch (error) {
            logTest('页面性能测试', false, `页面性能测试失败: ${error.message}`);
        }

        // 7. 测试错误处理
        console.log('\n🚨 第七阶段：错误处理测试');

        try {
            // 测试404页面
            await page.goto('http://localhost:5174/non-existent-page', {
                waitUntil: 'networkidle2'
            });

            // 检查是否显示404错误页面
            const errorPage = await page.$('.error-page') ||
                            await page.$('[data-testid="404-page"]');
            logTest('404错误页面', !!errorPage, '404错误页面正常显示');

        } catch (error) {
            logTest('错误处理测试', false, `错误处理测试失败: ${error.message}`);
        }

    } catch (error) {
        console.error('❌ 前端测试过程中发生严重错误:', error);
    } finally {
        if (browser) {
            await browser.close();
        }
    }

    // 生成测试报告
    console.log('\n' + '='.repeat(60));
    console.log('📊 前端功能测试报告');
    console.log('='.repeat(60));

    const successRate = testResults.total > 0 ?
        Math.round((testResults.passed / testResults.total) * 100) : 0;

    console.log(`总测试数: ${testResults.total}`);
    console.log(`通过测试: ${testResults.passed}`);
    console.log(`失败测试: ${testResults.failed}`);
    console.log(`成功率: ${successRate}%`);

    if (successRate >= 80) {
        console.log('\n🎉 前端功能测试通过！系统运行良好。');
    } else if (successRate >= 60) {
        console.log('\n⚠️ 前端功能测试基本通过，存在少量问题。');
    } else {
        console.log('\n❌ 前端功能测试失败，需要重点修复。');
    }

    console.log('='.repeat(60));
}

// 检查Puppeteer是否已安装
const checkPuppeteer = () => {
    try {
        require('puppeteer');
        return true;
    } catch (error) {
        console.log('❌ Puppeteer未安装，请运行以下命令安装：');
        console.log('npm install puppeteer');
        return false;
    }
};

// 主函数
async function main() {
    console.log('🎯 HR管理系统前端功能测试');
    console.log('=====================================\n');

    if (!checkPuppeteer()) {
        return;
    }

    await testFrontendFunctionality();
}

// 运行测试
if (require.main === module) {
    main().catch(console.error);
}

module.exports = { testFrontendFunctionality };
